<template>
  <div
    v-loading="loading"
    class="add-box"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 1)"
  >
    <div v-if="editType === 'edit' && userList.length" class="header-btn">
      <el-button
        class="mb-20"
        type="danger"
        plain
        size="small"
        :disabled="!slecteArr || !slecteArr.length"
        @click="batchDelete"
      >批量删除</el-button>
    </div>
    <TableCard
      class="tableCard"
      :card-data="handlerData(userList)"
      @clickBtn="clickBtn"
      @selectionChange="selectionChange"
    />
  </div>
</template>

<script>
import TableCard from '@/components/TableCard'
import { MessageBox } from 'element-ui'
export default {
  name: 'RoleTenantUse',
  components: { TableCard },
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      userList: [],
      slecteArr: [],
      tenantRoleId: '',
      editType: '',
      tableConfig: [
        {
          prop: 'tenantName',
          name: '租户名称',
          minWidth: 110
        },
        {
          prop: 'userName',
          name: '主账号',
          minWidth: 110
        },
        {
          prop: 'statusName',
          name: '状态',
          minWidth: 110
        },
        {
          prop: 'delFlagName',
          name: '是否删除',
          minWidth: 110
        },
        {
          name: '操作',
          width: 100,
          fixed: 'right',
          thStyle: { 'text-align': 'left' },
          operateList: [
            {
              type: 'btnText',
              label: '删除',
              id: 'tenant-role-user-delete',
              authId: 'grass-core:tenantRole:deleteById',
              config: { type: 'text' },
              style: { color: '#f74a5c' }
            }
          ]
        }
      ]
    }
  },
  computed: {
    handlerData() {
      return (cardData) => {
        return {
          head: this.tableConfig,
          body: cardData || [],
          hidePagination: true,
          isShowIndex: true,
          isMultiple: this.editType === 'edit'
        }
      }
    }
  },
  watch: {
    popData: {
      handler(val) {
        const { id } = val
        if (id) {
          this.tenantRoleId = id
          this.queryTenantDetail(id)
        }
      },
      deep: true,
      immediate: true
    },
    popConfig: {
      handler(val) {
        const { editType } = val
        this.editType = editType
        const idx = this.tableConfig.findIndex((e) => e.name === '操作')
        if (editType === 'detail' && idx !== -1) {
          this.tableConfig.splice(idx, 1)
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  methods: {
    async queryTenantDetail(id) {
      try {
        this.loading = true
        const res = await this.$api.tenantRole.queryAscriptionTenant({ id })
        if (res.code === '1000') {
          this.userList = res.data || []
        } else {
          this.userList = []
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 操作事件
    clickBtn(item, row) {
      if (item.id === 'tenant-role-user-delete') {
        this.handlerDelete([row.id], `删除${row.tenantName}`)
      }
    },
    /** 批量删除 */
    batchDelete() {
      const tenantIds = this.slecteArr.map((e) => e.id)
      const msg = this.slecteArr.map((e) => e.tenantName).join(',')
      this.handlerDelete(tenantIds, `批量删除${msg}`)
    },
    /** 处理删除 */
    async handlerDelete(tenantIdList, msg) {
      const hintMsg = `确认${msg}租户信息? `
      MessageBox.confirm(`${hintMsg}`, `提示`, {
        confirmButtonText: `确认`,
        cancelButtonText: `取消`,
        customClass: 'set-max-height50',
        type: 'warning'
      })
        .then(async () => {
          try {
            this.loading = true
            const res = await this.$api.tenantRole.removeAscriptionTenant({
              id: this.tenantRoleId,
              tenantIdList
            })
            if (res.code === '1000') {
              this.$message.success('删除成功')
              this.queryTenantDetail(this.tenantRoleId)
            } else {
              this.loading = false
            }
          } catch (error) {
            this.loading = false
          }
        })
        .catch(() => {})
    },
    /** 选择事件 */
    selectionChange(arr) {
      this.slecteArr = arr
    }
  }
}
</script>

<style lang="scss" scoped>
.add-box {
  color: #333;
  height: 50vh;
  display: flex;
  flex-direction: column;
  padding: 0 20px;

  .tree-box {
    flex: 1;
    overflow-y: auto;
    .filter-tree {
      height: 100%;
    }
  }

  .tree-select-input {
    width: 50%;
    margin-bottom: 15px;
  }

  .custom-tree-node {
    display: flex;
    align-items: center;
  }

  ::v-deep .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner,
  ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: rgb(219,139,57);
    border-color: rgb(219,139,57);
  }
}
</style>
